<template>
	<div>
		<el-form :model="params">
			<el-select v-model="params.siteId" placeholder="请选择站点">
				<el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId">
				</el-option>
			</el-select>
			页面别名：<el-input v-model="params.pageAliase" style="width: 100px"></el-input>
			<el-button type="primary" v-on:click="query" size="small">查询</el-button>
			<router-link class="mui-tab-item" :to="{path:'/cms/page/add/',query:{
				page:this.params.page,
				siteId:this.params.siteId
			}}">
				<el-button type="primary" size="small">新增页面</el-button>
			</router-link>

		</el-form>
		<el-table :data="list" stripe style="width: 100%">
			<el-table-column type="index" label="编号" width="60">
			</el-table-column>
			<el-table-column prop="pageName" label="页面名称" width="120">
			</el-table-column>
			<el-table-column prop="pageAliase" label="别名" width="120">
			</el-table-column>
			<el-table-column prop="pageType" label="页面类型" width="150">
			</el-table-column>
			<el-table-column prop="pageWebPath" label="访问路径" width="250">
			</el-table-column>
			<el-table-column prop="pagePhysicalPath" label="物理路径" width="250">
			</el-table-column>
			<el-table-column prop="pageCreateTime" label="创建时间" width="180">
			</el-table-column>
			<el-table-column label="操作" width="80">
				<template slot-scope="page">
					<el-button size="small" type="text" @click="edit(page.row.pageId)">编辑
					</el-button>
					<el-button size="small" type="text" @click="del(page.row.pageId)">删除
					</el-button>
					<el-button size="small" type="text" @click="preview(page.row.pageId)">页面预览
					</el-button>
					<el-button size="small" type="primary" plain @click="postPage(page.row.pageId)">发布</el-button>
					<!-- <el-button @click="preview(page.row.pageId)" type="text" size="small">页面预览</el-button> -->
				</template>
			</el-table-column>

		</el-table>
		<el-pagination :page-size="this.params.size" :current-page="this.params.page" layout="prev, pager, next" :total="total"
		 style="float: right;" v-on:current-change="changePage">
		</el-pagination>
	</div>
</template>
<script>
	import * as CmsApi from '../api/cms'
	export default {
		data() {
			return {
				list: [],
				total: "total",
				params: {
					page: 1, //页码
					size: 10, //每页显示个数
					siteId: '',
					pageAliase: ''
				}
			}
		},
		methods: {
			//分页查询
			changePage: function(page) {
				this.params.page = page;
				this.query()
			},
			//查询
			query: function() {
				//alert("查询")
				CmsApi.page_list(this.params.page, this.params.size, this.params).then((res) => {
					this.total = res.queryResult.total;
					this.list = res.queryResult.list;
				})
			},
			edit: function(pageId) {
				this.$router.push({
					path: '/cms/page/edit/' + pageId,
					query: {
						page: this.params.page,
						siteId: this.params.siteId
					}
				})
			},
			del: function(pageId) {
				this.$confirm('您确认删除吗?', '提示', {}).then(() => {

					//调用服务端接口
					CmsApi.page_del(pageId).then(res => {

						if (res.success) {
							this.$message.success("删除成功")
							//刷新页面
							this.query()
						} else {
							this.$message.error("删除失败")
						}
					})
				})
			},
			postPage(pageId) {
				this.$confirm('确认发布该页面吗?', '提示', {}).then(() => {
					CmsApi.page_postPage(pageId).then((res) => {
						if (res.success) {
							console.log('发布页面id=' + pageId);
							this.$message.success('发布成功，请稍后查看结果');
						} else {
							this.$message.error('发布失败');
						}
					});
				}).catch(() => {});
			},
			//页面预览
			preview(pageId) {
				window.open("http://www.xuecheng.com/cms/preview/" + pageId)
			}
		},
		created() {
			this.params.page = Number.parseInt(this.$route.query.page || 1);
			this.params.siteId = this.$route.query.siteId || '';
		},
		mounted() {
			this.query();
			//初始化站点列表
			this.siteList = [{
					siteId: '5a751fab6abb5044e0d19ea1',
					siteName: '门户主站'
				},
				{
					siteId: '102',
					siteName: '测试站'
				}
			]
		}
	}
</script>
<style>

</style>
